<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css"/>

</head>
<body>
<div style="padding: 20px 10px 0px">
    <fieldset class="layui-elem-field" shiro:hasPermission="goods:view">
        <legend>查询条件</legend>
        <div class="layui-field-box">
            <form class="layui-form" action="" id="searchFrm">
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="providerid" id="providerid">
                        <select id="providerSelect" name="providername" lay-filter="providername">
                            <option value="">请选择供应商</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">商品名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="goodsname" placeholder="请输入商品名" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">生产批号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="productcode" placeholder="请输入生产批号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">批准文号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="promitcode" placeholder="请输入批准文号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">商品描述</label>
                    <div class="layui-input-inline">
                        <input type="text" name="description" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">商品规格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="size" placeholder="请输入商品规格" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">商品包装</label>
                    <div class="layui-input-inline">
                        <input type="text" name="goodspackage" placeholder="请输入商品包装类型" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
</div>
<table id="goodsTable" lay-filter="goodsTable"></table>

<!--toolbar开始-->
<div id="tableToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="goods:create" class="layui-btn" lay-event="add">添加</button>
    <!--<button type="button" shiro:hasPermission="goods:batherdelete"  class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>-->
</div>
<div id="cellToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="goods:update" class="layui-btn layui-btn-sm layui-btn-xs"
            lay-event="update">修改
    </button>
    <button type="button" shiro:hasPermission="goods:delete"
            class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除
    </button>
</div>
<!--toolbar结束-->

<!--添加修改弹出层开始-->
<!--添加修改弹出层开始-->
<form class="layui-form" id="addForm" lay-filter="addForm" action="" style="display: none;padding: 20px">
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">供应商</label>
        <div class="layui-input-inline">
            <input type="hidden" id="providerid1" name="providerid">
            <select id="providerSelectAdd" name="providername" lay-filter="providernameadd">
                <option value="">请选择供应商</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">

        <label class="layui-form-label">商品名</label>
        <div class="layui-input-inline">
            <input type="text" id="goodsname" name="goodsname"
                   autocomplete="off"
                   placeholder="请输入商品名"
                   class="layui-input">
            <input type="hidden" id="id" name="id">
        </div>
    </div>

    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">产地</label>
        <div class="layui-input-inline">
            <input type="text" id="produceplace" name="produceplace" autocomplete="off"
                   placeholder="请输入产地"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">规格</label>
        <div class="layui-input-inline">
            <input type="text" id="size" name="size" autocomplete="off"
                   placeholder="请输入规格"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">包装</label>
        <div class="layui-input-inline">
            <input type="text" id="goodspackage" name="goodspackage" autocomplete="off"
                   placeholder="请输入包装"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">生产批号</label>
        <div class="layui-input-inline">
            <input type="text" id="productcode" name="productcode" autocomplete="off"
                   placeholder="请输入生产批号"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">批准文号</label>
        <div class="layui-input-inline">
            <input type="text" id="promitcode" name="promitcode" autocomplete="off"
                   placeholder="请输入批准文号"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">销售价格</label>
        <div class="layui-input-inline">
            <input type="text" id="price" name="price" autocomplete="off"
                   placeholder="请输入销售价格"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">是否可用</label>
        <div class="layui-input-block">
            <input type="radio" name="available" value="1" title="可用" checked>
            <input type="radio" name="available" value="0" title="不可用">
        </div>
    </div>
    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="text" id="number" name="number" autocomplete="off"
                   placeholder="请输入库存"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-input-inline">
        <label class="layui-form-label">预留库存</label>
        <div class="layui-input-inline">
            <input type="text" id="dangernum" name="dangernum" autocomplete="off"
                   placeholder="请输入预留库存"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-inline">
            <input type="text" id="description" name="description" autocomplete="off"
                   placeholder="请输入商品描述"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-upload">
            <input type="hidden" id="goodsimg" name="goodsimg">
            <img class="layui-upload-img" id="goodsimageid" src="/resources/images/lockimg.jpg" width="80px"
                 height="80px">
            <button type="button" class="layui-btn" id="doUpload">上传图片</button>
        </div>
    </div>

    <div class="layui-input-block">
        <div align="center">
            <button type="submit" class="layui-btn" id="release" lay-submit="" lay-filter="release">保存</button>
            <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>

        </div>
    </div>
</form>
<!--添加修改弹出层结束-->
<!--添加修改弹出层结束-->


<script src="/resources/layui/layui.js"></script>
<script>
    var tableIns;
    layui.use(['table', 'form', 'jquery', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;


        //第一个实例
        tableIns = table.render({
            elem: '#goodsTable'
            , height: 312
            , url: '/goods/loadAllGoods' //数据接口
            , page: true //开启分页
            , toolbar: "#tableToolbar"
            , cols: [
                [ //表头
                    {width: 80, type: 'checkbox'}
                    , {field: 'id', title: 'ID', width: 50}
                    , {field: 'goodsname', title: '商品名称', width: 100}
                    , {field: 'providername', title: '供应商', width: 100}
                    , {field: 'size', title: '规格', width: 100}
                    , {field: 'goodspackage', title: '包装'}
                    , {field: 'productcode', title: '生产批号', width: 120}
                    , {field: 'promitcode', title: '批准文号', width: 120}
                    , {field: 'description', title: '描述', width: 100}
                    , {field: 'price', title: '价格', width: 80}
                    , {field: 'number', title: '库存', width: 100}
                    , {field: 'dangernum', title: '预警值', width: 100}
                    , {field: 'goodsimg', title: '图片', width: 200,templet:function (data) {
                        return "<img width=40 height=40 src='/upload/downloadFile?path="+data.goodsimg+"' />"
                    }}
                    , {
                    field: 'available', title: '是否可用', width: 100, templet: function (data) {
                        return data.available == 1 ? '可用' : '不可用';
                    }
                }
                    , {title: '操作', width: 200, fixed: 'right', align: 'center', toolbar: '#cellToolbar'}
                ]
            ]
        });


        //执行实例
        var uploadInst = upload.render({
            elem: '#doUpload'
            , url: '/upload/uploadFile'
            , accept: "images"  //校验文件的类型  默认只支持图片上传
            , acceptMime: 'image/*'  //设置打开的选择框里面的文件类型列表
            , field: 'mf'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#goodsimageid').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                } else {
                    layer.msg("上传成功");
                    var goodsimg = res.data.src;
                    $("#goodsimg").val(goodsimg);//设置存放到数据库地址的表单值
                }
            }


        });


        //弹出层的index
        var layerindex;

        //添加修改公用弹出层的路径
        var addFormUrl;

        //加载select选择框中内容
        function initSelectedProviderList(selectid) {
            $.post("/goods/loadSelectedProviderList", function (obj) {
                if (obj.code == 200) {
                    var data = obj.data;
                    var selecthtml = "<option value=''>请选择供应商</option>";
                    for (var i = 0; i < data.length; i++) {
                        var datum = data[i];
                        selecthtml += "<option value='" + datum.id + "'>" + datum.providername + "</option>";
                    }
                    $("#" + selectid).html(selecthtml);
                    form.render("select");
                }
            })
        }

        initSelectedProviderList("providerSelectAdd");
        initSelectedProviderList("providerSelect");


        //监听事件
        table.on('toolbar(goodsTable)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addGoods();
                    break;
                // case 'batchDelete':
                //     layer.msg('批量删除');
                //     var checkStatus = table.checkStatus('goodsTable')
                //         , data = checkStatus.data;
                //
                //     layer.alert(JSON.stringify(data));
                //
                //     break;
            }
            ;
        });


        table.on('tool(goodsTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.data.id);

            switch (obj.event) {
                case 'update':
                    updateGoods(obj);
                    break;
                case 'delete':
                    deleteGoods(obj);
                    break;
                case 'dispatcherPermission':
                    dispatcherPermission(obj);
                    break;
            }
            ;
        });

        /**
         *
         * 添加
         */
        function addGoods() {
            layer.msg('添加');
            layer.open({
                title: '添加商品',
                type: 1,
                area: ['1000px', '450px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    // 使下拉框为不弹出状态

                    $(this).removeClass("layui-form-selected");
                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    //清空pid内容
                    layerindex = index;
                    addFormUrl = "/goods/addGoods";
                }
            });
        }

        /**
         * 修改商品
         * @param obj
         */
        function updateGoods(obj) {

            layer.open({
                title: '修改商品',
                type: 1,
                area: ['1000px', '450px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    //装载默认数据

                    form.val("addForm", obj.data);

                    form.val("addForm", {available: obj.data.available + ""});
                    // $("#providerSelectAdd").val(obj.data.providername);


                    form.val('addForm', {providername: obj.data.providerid});

                    $("#goodsimageid").attr("src","/upload/downloadFile?path="+obj.data.goodsimg);

                    layerindex = index;
                    addFormUrl = "/goods/updateGoods";
                }
            });
        }


        /**
         *删除商品
         *
         */

        function deleteGoods(obj) {
            layer.confirm("确定要删除商品{" + obj.data.goodsname + "}吗?", {icon: 3, title: '提示'}, function (index) {

                $.post("/goods/deleteGoods", {id: obj.data.id}, function (data) {
                    layer.msg(data.msg)
                    if (data.code == 200) {
                        //刷新表格
                        $("#doReset").click();
                    }
                });
                layer.close(index);
            });
        }

        //监听选择框
        form.on('select(providername)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            $("#providerid").val(data.value)
        });

        //监听弹出层选择框
        form.on('select(providernameadd)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            $("#providerid1").val(data.value)
        });


        //监控添加提交事件
        form.on("submit(release)", function (data) {
            var params = $("#addForm").serialize();
            var pid = $("#pid").val();
            $.post(addFormUrl, params, function (data) {
                layer.msg(data.msg);
            });

            //重置添加表单
            $("#addForm")[0].reset();
            $("#doReset").click();
            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex);
        });
        $("#cancel").click(function () {
            $("#addForm")[0].reset();
            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex)
            //清空pid内容
            $("#pid").val("");
        })

        //监听查询事件
        form.on("submit(doSearch)", function (data) {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: '/goods/loadAllGoods?' + params
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });
        //监控重置事件
        $("#doReset").click(function () {
            tableIns.reload({
                url: '/goods/loadAllGoods?'
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });

    });

    function reloadTable(goodsid) {
        tableIns.reload({
            url: '/goods/loadAllGoods?id=' + goodsid,
            // where:{
            //     page:1
            // }
        })
    }
</script>
</body>

</html>